<template>
  <v-container fluid fill-height class="login-container">
    <v-layout align-center justify-center>
      <v-flex xs12 sm8 md4>
        <v-card class="elevation-12">
          <v-toolbar dark color="primary">
            <v-toolbar-title>Login form</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-tooltip bottom>
              <v-btn
                slot="activator"
                icon
                large>
                <v-icon large>code</v-icon>
              </v-btn>
              <span>Source</span>
            </v-tooltip>
          </v-toolbar>
          <v-card-text>
            <v-form>
              <v-text-field prepend-icon="person" name="login"
                            label="Login" type="text"
                            v-model="name"></v-text-field>
              <v-text-field prepend-icon="lock" name="password"
                            label="Password" type="password"
                            v-model="passwd"></v-text-field>
              <v-checkbox label="记住密码" v-model="remeber"></v-checkbox>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="login">Login</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator'

  @Component
  export default class Login extends Vue {

    name: string = "";
    passwd: string = "";
    remeber: boolean = true;


    login() {
      console.log("login now");
    }
  }
</script>

<style scoped lang="scss">
  .login-container {
    position: relative;
    background: url('../assets/hero.jpeg') no-repeat center;
    background-size: cover;
  }
</style>